// 将事件延迟执行，如果在这段时间内事件再次被触发，则取消执行之前的事件
// 写法1：现在这个写法不是hooks的写法，hooks的写法是包含ref、watch这种会改变页面状态
// interface IDebounceFn<T> {
//     (...args: T[]): void | Promise<void>
// }
// export function useDebounce<T>(fn: IDebounceFn<T>, delay: number) {
//     let timer: number | null = null
//     return function f(this: void, ...arg: T[]) {
//         if (timer) {
//             clearTimeout(timer)
//         }
//         timer = setTimeout(() => {
//             fn.call(this, ...args)
//         }, delay)
//     }
// }
// 写法2：改成hooks的写法
// import type { _UnwrapAll } from 'pinia'
import { ref, watch, onUnmounted } from 'vue'
import type { Ref, UnwrapRef } from 'vue'
export function useDebounce<T>(value: Ref<T>, delay: Number) {
    const debounceValue = ref(value.value)
    let timer: number | null = null
    const unwatch = watch(value, (nv) => {
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            debounceValue.value = nv as UnwrapRef<T>
        }, delay)
    })
    onUnmounted(() => {
        unwatch()
    })
    return debounceValue
}